<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>精英杂志 - 管理后台</title>
    <link href="/vendor/bootstrap-lite.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/easymde@2.18.0/dist/easymde.min.css" rel="stylesheet">
    <link href="/css/custom.css" rel="stylesheet">
</head>
<body>
    <div class="container py-5">
        <h1 class="mb-4">📰 文章管理</h1>
        
        <div class="row">
            <div class="col-md-8">
                <form id="articleForm">
                    <div class="mb-3">
                        <label class="form-label">文章标题</label>
                        <input type="text" class="form-control" id="title" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">文章内容 (Markdown)</label>
                        <textarea id="content" class="form-control" rows="15"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">发布文章</button>
                    <button type="button" class="btn btn-outline-secondary" onclick="location.reload()">刷新列表</button>
                </form>
            </div>
            
            <div class="col-md-4">
                <h5>文章列表</h5>
                <div id="articleList" class="list-group"></div>
            </div>
        </div>
    </div>

    <script src="/vendor/bootstrap-lite.min.js"></script>
    <script src="/js/gitee-config.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/easymde@2.18.0/dist/easymde.min.js"></script>
    <script>
        const easyMDE = new EasyMDE({ element: document.getElementById('content') });
        
        // 加载文章列表
        function loadArticles() {
            fetch('/index.json')
                .then(r => r.json())
                .then(data => {
                    const list = document.getElementById('articleList');
                    list.innerHTML = data.map(item => `
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-1">${item.title}</h6>
                                <small class="text-muted">${new Date(item.date).toLocaleDateString()}</small>
                            </div>
                            <button class="btn btn-sm btn-outline-danger" onclick="deleteArticle('${item.permalink}')">删除</button>
                        </div>
                    `).join('');
                })
                .catch(() => {
                    document.getElementById('articleList').innerHTML = 
                        '<div class="alert alert-info">暂无文章，先发布一篇吧！</div>';
                });
        }
        
        // 发布文章
        document.getElementById('articleForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const title = document.getElementById('title').value;
            const content = easyMDE.value();
            const slug = title.toLowerCase().replace(/[^\w\u4e00-\u9fa5]+/g, '-');
            const date = new Date().toISOString().split('T')[0];
            
            const frontMatter = `---\ntitle: "${title}"\ndate: ${date}\ndraft: false\n---\n\n`;
            const markdown = frontMatter + content;
            
            // 创建下载
            const blob = new Blob([markdown], { type: 'text/markdown' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `${slug}.md`;
            a.click();
            
            alert('文章已生成，请将文件放入 content/posts 目录并重新部署');
            this.reset();
            easyMDE.value('');
        });
        
        // 删除文章（演示用）
        function deleteArticle(permalink) {
            if(confirm('确定删除？请手动删除 content/posts 中的对应文件并重新部署。')) {
                alert('请手动删除文件后重新部署');
            }
        }
        
        // 页面加载时执行
        loadArticles();
    </script>
</body>
</html>